<template>
  <section class="tabBar-wrap">
    <article class="tabBar-box" :style="{paddingBottom:phoneType?'20px':'0'}">
      <ul class="tabBar-nav flex">
        <!-- /**用户 */ -->
        <li
          class="item flex-1 align-center"
          v-for="(item, index) in list"
          @click="selectNavItem(index,item.pagePath)"
          :key="index"
        >
          <img
            style="width:25px;height:25px"
            :src="selectNavIndex === index ? item.selectedIconPath : item.iconPath"
            alt="iconPath"
          />
          <p
            :class="selectNavIndex === index ? 'item-text item-text-active' : 'item-text' "
          >{{item.text}}</p>
        </li>
      </ul>
    </article>
  </section>
</template>
<script>
// import { info } from '@/api/api';
import { mapGetters } from "vuex";
export default {
  props: ["selectNavIndex", "target"],
  watch: {
    target(newObj, oldObj) {
      console.log("newObj", newObj);
      console.log("oldObj", oldObj);
      if (this.userInfo) {
        this.identity = this.userInfo.identity;
        if (this.identity === "FINANCIAL") {
          // this.navList.splice(2, 1);
          this.list = this.navList1;
        } else {
          this.list = this.navList;
        }
      } else {
        this.identity = "USER";
        this.list = this.navList;
      }
    }
    // immediate: true,
    // deep: true
  },
  data() {
    return {
      identity: "USER",
      list: [],
      navList: [
        {
          text: "首页",
          pagePath: "/pages/index/index/main",
          iconPath: "/static/images/tabbar/index.png",
          selectedIconPath: "/static/images/tabbar/index1.png"
        },
        {
          text: "理财",
          pagePath: "/pages/money/money/main",
          iconPath: "/static/images/tabbar/money.png",
          selectedIconPath: "/static/images/tabbar/money1.png"
        },
        {
          text: "预约理财师",
          pagePath: "/pages/moneyMan/moneyMan/main",
          iconPath: "/static/images/tabbar/moneyMan.png",
          selectedIconPath: "/static/images/tabbar/moneyMan1.png"
        },
        {
          text: "商城",
          pagePath: "/pages/store/store/main",
          iconPath: "/static/images/tabbar/store.png",
          selectedIconPath: "/static/images/tabbar/store1.png"
        },
        {
          text: "我的",
          pagePath: "/pages/PersonalCenter/personal/main",
          iconPath: "/static/images/tabbar/personal.png",
          selectedIconPath: "/static/images/tabbar/personal1.png"
        }
      ],
      navList1: [
        {
          text: "首页",
          pagePath: "/pages/index/index/main",
          iconPath: "/static/images/tabbar/index.png",
          selectedIconPath: "/static/images/tabbar/index1.png"
        },
        {
          text: "理财",
          pagePath: "/pages/money/money/main",
          iconPath: "/static/images/tabbar/money.png",
          selectedIconPath: "/static/images/tabbar/money1.png"
        },
        {
          text: "商城",
          pagePath: "/pages/store/store/main",
          iconPath: "/static/images/tabbar/store.png",
          selectedIconPath: "/static/images/tabbar/store1.png"
        },
        {
          text: "我的",
          pagePath: "/pages/PersonalCenter/personal/main",
          iconPath: "/static/images/tabbar/personal.png",
          selectedIconPath: "/static/images/tabbar/personal1.png"
        }
      ],
      phoneType: false
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  created() {},
  mounted() {
    // Object.assign(this.$data, this.$options.data());
    // this.getInfo();
    // 登录者的身份：FINANCIAL.理财师,USER.普通用户
    if (this.userInfo) {
      this.identity = this.userInfo.identity;
      if (this.identity === "FINANCIAL") {
        // this.navList.splice(2, 1);
        this.list = this.navList1;
      } else {
        this.list = this.navList;
      }
    } else {
      this.identity = "USER";
      this.list = this.navList;
    }
    console.log(this.list);
    this.phoneType = wx.getStorageSync("phone");
  },
  methods: {
    // /** 获取用户信息 */
    // async getInfo () {
    //   await info()
    //     .then(res => {
    //       if (!res.code) {
    //         // 登录者的身份：FINANCIAL.理财师,USER.普通用户
    //         this.identity = res.identity;
    //         if (res.identity === 'FINANCIAL') {
    //           this.navList.splice(2, 1);
    //         }
    //       }
    //     })
    //     .catch(msg => {
    //       console.log(msg);
    //     });
    // },
    /**
     * 点击导航栏
     * @param index
     */
    selectNavItem(index, pagePath) {
      if (index === 1) {
        wx.removeStorage({
          key: "classifyId",
          success(res) {
            wx.reLaunch({
              url: pagePath
            });
          }
        });
      } else {
        if (index === this.selectNavIndex) {
          return false;
        } else {
          wx.reLaunch({
            url: pagePath
          });
        }
      }
    },

    /**
     * 路由跳转
     */
    bindNavigateTo(url) {
      wx.navigateTo({
        url
      });
    },
    /**
     * tabBar路由跳转
     */
    bindViewTap(url) {
      wx.switchTab({
        url
      });
    }
  }
};
</script>

<style lang="less" scoped>
.tabBar-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 49px;
  //   border-top: 1px solid #eee;
  background-color: #fff;
}

.tabBar-nav {
  width: 100%;
  height: 100%;
  align-items: center;

  .item {
    cursor: pointer;
    text-align: center;
  }
  .item-text {
    color: #898b8d;
    font-size: 10px;
  }
  .item-text-active {
    color: #020604;
  }
}
</style>